<template>
  <div class="banner">
      <div class="banner-box" v-show="!imgSwiper" @click="banSwiper">
        <div>
          <img src="http://localhost:8080/static/img/01.jpg" alt="">
        </div>
        <div> 经海湖风景区(AAA景区) </div>
      </div>
      <div class="banner-show" v-show="imgSwiper" @click="banSwiper">
        <swiper class="mySwiper" ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="item in banSwipermg" :key="item.id">
            <img :src="item.imgUrl" alt="">
          </swiper-slide>
        </swiper>
        <div class="swiper-pagination nbers" slot="pagination"></div>
      </div>
  </div>
</template>

<script>

export default {
    data() {
      return {
        imgSwiper: false,
        swiperOptions: {
          pagination: {
          // 小圆点
           el: '.swiper-pagination',
           type: 'fraction'
          },
          loop: true
        },
        banSwipermg: [
          {
            "id": "01",
            "imgUrl": "http://localhost:8080/static/img/01.jpg"
          },
          {
            "id": "02",
            "imgUrl": "http://localhost:8080/static/img/02.jpg"
          },
          {
            "id": "03",
            "imgUrl": "http://localhost:8080/static/img/03.jpg"
          }
        ]
      }
    },
    methods: {
      banSwiper() {
        this.imgSwiper = !this.imgSwiper;
      }
    }
}
</script>

<style lang="less" scoped>
.banner {

  > .banner-box {
    height: 2rem;
    width: 100%;
    position: relative;

    > div:first-child {
      >img {
        height: 2rem;
        width: 100%;
      }
    }

    >div:last-child {
      position: absolute;
      font-size: 0.16rem;
      font-weight: bold;
      color: var(--fontcolor);
      bottom: 0.2rem;
      left: 0.4rem;
    }
  }

  > .banner-show {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;

    .mySwiper {
      width: 100%;
      height: 2.5rem;
      top: 50%;
      position: absolute;
      transform: translateY(-70%);

      img {
        height: 100%;
        width: 100%;
        font-size: 0rem;
      }
    }

    > .nbers {
      color: #fff;
      margin-bottom: 0.2rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
  } 
}
</style>
